<!doctype html>
<html>
<head>
  <meta charset="utf-8">

  <title>masonry</title>

  <link rel="stylesheet" href="examples.css" />
  <style>
  * {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
            box-sizing: border-box;
  }

  body {
    font-family: sans-serif;
  }

  /* ---- button ---- */

  .button {
    display: inline-block;
    padding: 0.5em 1.0em;
    background: #EEE;
    border: none;
    border-radius: 7px;
    background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.2) );
    color: #222;
    font-family: sans-serif;
    font-size: 16px;
    text-shadow: 0 1px white;
    cursor: pointer;
  }

  .button:hover {
    background-color: #8CF;
    text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
    color: #222;
  }

  .button:active,
  .button.is-checked {
    background-color: #28F;
  }

  .button.is-checked {
    color: white;
    text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
  }

  .button:active {
    box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
  }

  /* ---- button-group ---- */

  .button-group:after {
    content: '';
    display: block;
    clear: both;
  }

  .button-group .button {
    float: left;
    border-radius: 0;
    margin-left: 0;
    margin-right: 1px;
  }

  .button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
  .button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }

  /* ---- isotope ---- */

  .isotope {
    background: #DDD;
    max-width: 1200px;
  }

  /* clear fix */
  .isotope:after {
    content: '';
    display: block;
    clear: both;
  }

  /* ui group */

  .ui-group {
    display: inline-block;
  }

  .ui-group h3 {
    display: inline-block;
    vertical-align: top;
    line-height: 32px;
    margin-right: 0.2em;
    font-size: 16px;
  }

  .ui-group .button-group {
    display: inline-block;
    margin-right: 20px;
  }

  /* color-shape */

  .color-shape {
    width: 70px;
    height: 70px;
    margin: 5px;
    float: left;
  }
 
  .color-shape.round {
    border-radius: 35px;
  }
 
  .color-shape.big.round {
    border-radius: 75px;
  }
 
  .color-shape.red { background: red; }
  .color-shape.blue { background: blue; }
  .color-shape.yellow { background: yellow; }
 
  .color-shape.wide, .color-shape.big { width: 150px; }
  .color-shape.tall, .color-shape.big { height: 150px; }
  </style>

</head>
<body>

  <h1>combination filters</h1>

<div id="filters">

  <div class="ui-group">
    <h3>Color</h3>
    <div class="button-group js-radio-button-group" data-filter-group="color">
      <button class="button is-checked" data-filter="">any</button>
      <button class="button" data-filter=".red">red</button>
      <button class="button" data-filter=".blue">blue</button>
      <button class="button" data-filter=".yellow">yellow</button>
    </div>
  </div>

  <div class="ui-group">
    <h3>Size</h3>
    <div class="button-group js-radio-button-group" data-filter-group="size">
      <button class="button is-checked" data-filter="">any</button>
      <button class="button" data-filter=".small">small</button>
      <button class="button" data-filter=".wide">wide</button>
      <button class="button" data-filter=".big">big</button>
      <button class="button" data-filter=".tall">tall</button>
    </div>
  </div>

  <div class="ui-group">
    <h3>Shape</h3>
    <div class="button-group js-radio-button-group" data-filter-group="shape">
      <button class="button is-checked" data-filter="">any</button>
      <button class="button" data-filter=".round">round</button>
      <button class="button" data-filter=".square">square</button>
    </div>
  </div>

</div>

<div class="isotope">
  <div class="color-shape small round red"></div>
  <div class="color-shape small round blue"></div>
  <div class="color-shape small round yellow"></div>
  <div class="color-shape small square red"></div>
  <div class="color-shape small square blue"></div>
  <div class="color-shape small square yellow"></div>
  <div class="color-shape wide round red"></div>
  <div class="color-shape wide round blue"></div>
  <div class="color-shape wide round yellow"></div>
  <div class="color-shape wide square red"></div>
  <div class="color-shape wide square blue"></div>
  <div class="color-shape wide square yellow"></div>
  <div class="color-shape big round red"></div>
  <div class="color-shape big round blue"></div>
  <div class="color-shape big round yellow"></div>
  <div class="color-shape big square red"></div>
  <div class="color-shape big square blue"></div>
  <div class="color-shape big square yellow"></div>
  <div class="color-shape tall round red"></div>
  <div class="color-shape tall round blue"></div>
  <div class="color-shape tall round yellow"></div>
  <div class="color-shape tall square red"></div>
  <div class="color-shape tall square blue"></div>
  <div class="color-shape tall square yellow"></div>
</div>


<script src="../bower_components/jquery/jquery.js"></script>
<script src="../bower_components/eventEmitter/EventEmitter.js"></script>
<script src="../bower_components/eventie/eventie.js"></script>
<script src="../bower_components/doc-ready/doc-ready.js"></script>
<script src="../bower_components/get-style-property/get-style-property.js"></script>
<script src="../bower_components/get-size/get-size.js"></script>
<script src="../bower_components/jquery-bridget/jquery.bridget.js"></script>
<script src="../bower_components/matches-selector/matches-selector.js"></script>
<script src="../bower_components/outlayer/item.js"></script>
<script src="../bower_components/outlayer/outlayer.js"></script>
<script src="../bower_components/masonry/masonry.js"></script>

<script src="../js/item.js"></script>
<script src="../js/layout-mode.js"></script>
<script src="../js/isotope.js"></script>
<script src="../js/layout-modes/masonry.js"></script>
<script src="../js/layout-modes/fit-rows.js"></script>

<script>
$( function() {
  // init Isotope
  var $container = $('.isotope').isotope({
    itemSelector: '.color-shape'
  });

  // store filter for each group
  var filters = {};

  $('#filters').on( 'click', '.button', function() {
    var $this = $(this);
    // get group key
    var $buttonGroup = $this.parents('.button-group');
    var filterGroup = $buttonGroup.attr('data-filter-group');
    // set filter for group
    filters[ filterGroup ] = $this.attr('data-filter');
    // combine filters
    var filterValue = '';
    for ( var prop in filters ) {
      filterValue += filters[ prop ];
    }
    // set filter for Isotope
    $container.isotope({ filter: filterValue });
  });

  // change is-checked class on buttons
  $('.button-group').each( function( i, buttonGroup ) {
    var $buttonGroup = $( buttonGroup );
    $buttonGroup.on( 'click', 'button', function() {
      $buttonGroup.find('.is-checked').removeClass('is-checked');
      $( this ).addClass('is-checked');
    });
  });
  
});

</script>

</body>
</html>
